<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head >
    <title>添加</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/layui/layui.js"></script>
    <script src="https://maplemei.gitee.io/xm-select/xm-select.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var index = 0;
        try{
            index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        }catch (e) {
        }
    </script>
</head>
<body >

<div class="layui-body">
    <style>
        .a-input {
            height: 36px;
            line-height: 36px;
            margin-bottom: 20px;
        }

        .a-input span {
            display: inline-block;
            width: 100px;
            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }

        .a-input input {
            border: 1px solid #dcdcdc;
            height: 22px;
            line-height: 22px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            border: 1px solid #dcdcdc;
            height: 36px;
            line-height: 36px;
            padding: 6px 4px;
            width: 260px;
            font-size: 14px;
            border-radius: 4px;
        }

        .a-input select {
            width: 260px;
        }

        .textarea-box{
            display: flex;

            padding-right: 15px;
            font-size: 14px;
            text-align: right;
            color: #323232;
        }
        .textarea-box span{
            width: 100px;
            margin-right: 20px;
        }
        .textarea-box textarea{
            border:1px solid #ccc;
            border-radius: 8px;
            padding: 5px;
        }
        .content-title {
            font-weight: bold;
            padding: 20px 40px;
            font-size: 16px;
        }
        .bussiness-table{
            width: 95%;
            margin: 0 auto;
        }
        .bussiness-table input{
            border: none;
            min-width:300px ;
            height: 36px;
            padding: 0 15px;
        }
        .bussiness-total-box{
            margin-left: 40px;
            margin-top: 30px;
        }
        .total-number{
            color: red;
            font-weight: bold;
            font-size: 16px;
        }
        .order-save{
            margin: 30px 150px
        }

    </style>
    <div class="sp-wrapper">
        <div class="order-body">
            
            <form method="post" class="layui-form" id="sp-form">
                
                <div class="layui-form-item">
                    <label class="layui-form-label">商品标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="goodsName" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品编码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="goodsNum" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">来源URL</label>
                    <div class="layui-input-block">
                        <input type="text" name="sourceUrl" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">素材路径</label>
                    <div class="layui-input-block">
                        <input type="text" name="imagePath" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <!-- <div class="layui-form-item">
                    <label class="layui-form-label">erpGoodsId</label>
                    <div class="layui-input-inline">
                        <input type="text" name="erpGoodsId" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div> -->
                <div class="layui-form-item">
                    <label class="layui-form-label">主图</label>
                    <div class="layui-input-block">
                        <input type="text" name="goodsImage" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label class="layui-form-label">商品成本</label>
                    <div class="layui-input-inline">
                        <input type="text" name="goodsCost" lay-verify="required|number" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发布店铺</label>
                    <div class="layui-input-block">
                        <div id="demo1"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发布日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="publishDate" id="publish_date" lay-verify="required" readonly placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="add_btn">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    <script type="text/javascript" src="/sb/jquery.min.js"></script>
    <script type="text/javascript" src="/sb/Tips.min.js"></script>

    <!-- end sp-wrapper -->
    <script>
        layui.use(['laydate', 'form','layer'], function () {
            var laydate = layui.laydate;
            var form = layui.form;
            var layer = layui.layer;

            //执行一个laydate实例
            laydate.render({
                elem: '#publish_date' //指定元素
            });

            form.on('submit(add_btn)', function(data){
                console.log(data.field);
                $.ajax({
                    type:"POST",
                    url:"/shop/goods_publish_add_ajax",
                    processData: false, //表明不要对数据进行处理
                    data:JSON.stringify(data.field),
                    contentType: 'application/json',
                    success:function (res) {
                        if(res.code == 0){
                            parent.layer.msg(res.msg)
                            parent.layer.close(index);
                            parent.location.reload();
                        }else {
                            layer.msg(res.msg)
                        }
                        return false;
                    }
                });
                return false;
            });
        });
    </script>
    <script>

         var options = {
                el: '#demo1',
                name: 'shopIds',//表单的name属性
                layVerify: 'required',//必填项
                //layVerType: 'tips',//提示类型 同layui
                tips: '发布了哪些店铺?',
                toolbar: {//工具条,全选,清空,反选,自定义
                    show: true,
                    list: [ 
                        'ALL', 
                        'CLEAR', 
                        'REVERSE'
                    ]
                },
                data: [],
                //initValue: ['shuiguo','shucai'],//默认初始化,也可以数据中selected属性
                //language: 'zn',//语言包
                //filterable: true,//搜索功能
                //autoRow: true,//选项过多,自动换行
                // repeat: true,//是否支持重复选择
                //max: 2,//最多选择2个
                // template({ item, sels, name, value }){
                //    //template:自定义下拉框的模板
                //     return item.name  + '<span style="position: absolute; right: 10px; color: #8799a3">'+value+'</span>' 
                // },
        };
        var demo1 = xmSelect.render(options)
        setTimeout(function(){
            //假设data是ajax 异步获取的
            var data =[
                //selected属性可以初始化下拉框
                //{name: '水果', value:'shuiguo',selected:true, disabled: true},
                {name: '梦小妮牛仔裤 - 拼多多', value:'5'},
                {name: '梦小妮牛仔裤 - 淘宝', value: '6'},
                {name: '甘小姐de店 - 拼多多', value: '14'},
                {name: '梦小妮牛仔裤 - 抖音', value: '22'},
                // {name: '甘小姐的包包 - 拼多多', value: '17'},
            ];
            //模拟通过ajax 获取json数据,异步更新多选下拉框的值
            demo1.update({data: data})
        },100);
    </script>
      </div>
    </div>
</div>
</body>
<html>
